class Signin {
    constructor() {
        this.repass = ''
        this.t = null //保存定时器
    }

    init() {
        this.RepetName()
    }


    //检测注册用户注册信息的重复
    RepetName() {
        let _this = this
        let nameflag = null
        let tleflag = null
        let passwordflag = null
        let repassflag = null
        let check = null
        $('.login_btn').attr('disabled', true).css({
            background: '#b0b0b0',
            color: '#333',
            border: '0'
        })
        $('.username').on('focus', function () {
            $(this).val()
            $('.falname').eq(0).css('color', '#333').html('中英文均可14字符')
        })

        $('.username').on('blur', function () {

            if ($(this).val() !== '') {//判断数据不能为空
                let value = $(this).val()
                let vals = $(this).val().replace(/[\u4e00-\u9fa5]/g, '**').length//字符长度

                if (vals <= 14) {
                    let reg = /^[a-zA-Z\u4e00-\u9fa5]+$/g
                    // console.log(value);
                    if (reg.test(value)) {

                        //检测重复用户名
                        let names = $(this).val()
                        $.ajax({
                            method: 'post',
                            url: 'http://127.0.0.1/SAMSUNGproject/backend/registry.php',
                            data: {
                                username: names
                            }
                            // dataType: 'json',
                        }).then((result) => {
                            //获取当前后端返回的数据判断是否重复
                            if (result !== 'errName') {
                                $('.falname').eq(0).html('可用').addClass('iconfont icon-chenggong').css('color', '#42d876')
                                nameflag = true
                                console.log(nameflag);

                            } else {
                                $('.falname').eq(0).html('重复').addClass('iconfont icon-shibai').css('color', '#333')
                                nameflag = false
                            }
                            Checkname()

                        })
                    } else {
                        $('.falname').eq(0).css('color', 'red').html('不符合规范')
                        nameflag = false
                    }
                } else {
                    $('.falname').eq(0).css('color', 'red').html('长度呦问题')
                    nameflag = false
                }
            } else {
                $('.falname').eq(0).css('color', 'red').html('不能为空')
                nameflag = false

            }
            Checkname()

        })
        //判断手机号重复
        $('.tel').on('focus', function () {
            $(this).val()
            $('.falname').eq(1).css('color', '#333').html('11位手机号码')
        })
        $('.tel').on('blur', function () {

            if ($(this).val() !== '') {//判断数据不能为空
                let value = $(this).val().length
                // console.log(value);
                // let vals = $(this).val().replace(/[\u4e00-\u9fa5]/g, '**').length//字符长度
                if (value <= 11) {
                    // console.log(value);
                    let reg = /^1[356789][0-9]\d{8}$/
                    // console.log(value);
                    if (reg.test($(this).val())) {
                        console.log(1);
                        let telname = $(this).val()
                        $.ajax({
                            method: 'post',
                            data: {
                                tel: telname
                            },
                            url: 'http://127.0.0.1/SAMSUNGproject/backend/registry.php',
                            // dataType: 'json',
                        }).then((result) => {
                            //获取当前后端返回的数据判断是否重复
                            console.log(result);
                            if (result !== 'errName') {

                                $('.falname').eq(1).html('可用').addClass('iconfont icon-chenggong').css('color', '#42d876')
                                tleflag = true


                            } else {
                                $('.falname').eq(1).html('重复').addClass('iconfont icon-shibai').css('color', 'red')
                                tleflag = false
                            }
                            Checkname()
                        })

                    } else {
                        $('.falname').eq(1).css('color', 'red').html('不符合规范').addClass('iconfont icon-shibai').css('color', 'red')
                        tleflag = false
                    }
                } else {
                    $('.falname').eq(1).css('color', 'red').html('长度呦问题').addClass('iconfont icon-shibai').css('color', 'red')
                    tleflag = false
                }
            } else {
                $('.falname').eq(1).css('color', 'red').html('不能为空')
                tleflag = false
                Checkname()
            }
        })
        //密码的检测强度
        $('.password').on('focus', function () {
            $('.falname').eq(2).css('color', '#333').html('1-12位中英文大小写~')//获取焦点给提示文字
        })
        //失去焦点判断value的强度，根据正则表达式进行检测强度，1-4分为四种强度，弱，中，强，完美。根据索引标记，每次正则检测如果value值正则匹配让标记+1,1-4代表四种强度，最终进行判断强度。
        $('.password').on('input', function () {
            let passValue = $(this).val()
            let index = 0//标记
            //正则判断强度
            let reg1 = /[0-9]/g
            let reg2 = /[a-z]/g
            let reg3 = /[A-Z]/g
            let reg4 = /\D_/g
            //标记思维判断
            if (reg1.test(passValue)) {
                index++
            }
            if (reg2.test(passValue)) {
                index++
            }
            if (reg3.test(passValue)) {
                index++
            }
            if (reg4.test(passValue)) {
                index++
            }
            //根据标记判断是哪一种强度
            switch (index) {
                case 1: $('.falname').eq(2).css('color', 'red').html('弱'); passwordflag = false
                    break;
                case 2: $('.falname').eq(2).css('color', '#e8df3b').html('中'); passwordflag = true
                    break;
                case 3: $('.falname').eq(2).css('color', '#42d876').html('强'); passwordflag = true
                    break;
                case 4: $('.falname').eq(2).css('color', '#42d876').html('完美'); passwordflag = true
                    break;
            }
            console.log(index);
        })
        $('.password').on('blur', function () {
            $('.falname').eq(2).html('')
            //获取输入的值
            // console.log($(this).val());
            if ($(this).val() !== '') {

                if ($(this).val().length >= 6 && $(this).val().length <= 12) {
                    _this.repass = $(this).val()
                    if (passwordflag) {
                        $('.falname').eq(2).addClass('iconfont icon-chenggong').css('color', '#42d876')
                        passwordflag = true

                        _this.t = setInterval(() => {
                            $('.btnTxt').css({
                                top: -36,
                                opacity: 0
                            })
                            $('.btnTxt').stop(true).animate({
                                top: -28,
                                opacity: 1
                            }, 300);
                        }, 1000)
                    } else {
                        $('.falname').eq(2).html('可用').addClass('iconfont icon-chenggong').css('color', '#42d876')
                        passwordflag = false
                    }
                } else {
                    $('.falname').eq(2).css('color', 'red').html('密码长度呦问题！')
                    passwordflag = false
                }
            } else {
                $('.falname').eq(2).css('color', 'red').html('密码不能为空！')
                passwordflag = false
            }
            Checkname()
        })
        //确认密码的验证，获取输入的密码，存储变量，失去焦点当变量和当前input值为true，表示一致。
        $('.repass').on('focus', function () {
            $('.falname').eq(3).css('color', '#333').html('密码要一致')
        })
        $('.repass').on('input', function () {
            // $('.falname').eq(3).css('color', '#333').html('')
            if ($(this).val() !== '') {
                if ($(this).val() === _this.repass) {
                    console.log(true);
                    $('.falname').eq(3).addClass('iconfont icon-chenggong').css('color', '#42d876')
                    repassflag = true
                } else {
                    $('.falname').eq(3).addClass('iconfont icon-shibai').css('color', 'red')
                    console.log(false);
                    repassflag = false
                }
            } else {
                $('.falname').eq(3).css('color', 'red').html('密码要一致')
                repassflag = false
            }

            Checkname()
        })
        console.log($('.el_cheked').prop('checked'));

        //标记思维，当点击当前阅读协议，判断是否为true，为true设置为true
        $('.el_cheked').on('click', function () {
            console.log($(this));
            if ($('.el_cheked').prop('checked')) {
                check = true

                clearInterval(_this.t)//如果点击为true就停止定时器
            } else {
                check = false
                // alert('请阅读协议！')
            }
            Checkname()
            console.log(check);
        })

        //判断注册按钮的提交是否开启。
        function Checkname() {
            if (nameflag && tleflag && passwordflag && repassflag && check) {
                $('.login_btn').attr('disabled', false).css({
                    background: '#333',
                    color: '#fff',
                    border: '1px solid #333'
                })
            } else {
                $('.login_btn').attr('disabled', true).css({
                    background: '#b0b0b0',
                    color: '#333',
                    border: '0'
                })
            }
        }
        //点击手机号码登录跳转手机号码登录页面
        // console.log($('.login_other_i a').eq(1));
        $('.login_other_i a').eq(0).on('click', function (e) {
            location.href = 'http://127.0.0.1/SAMSUNGproject/frontend/login.html'
        })
    }
}
export {
    Signin
}